<template>
	<view class="all">
		<form @submit='issueSubmit'>
			<view class="show">
				<view class="btn">
				</view>
				<view class="tx">
					<textarea @blur='areaBlur' :focus="onFocus" fixed="false" name='tfanlt' :value="tfanlt" class="te" placeholder="这一刻的想法......"
					 maxlength="200"></textarea>
					<!-- <text class="remark" class="te" @click="clickText">{{tfanlt}}</text> -->
				</view>
			</view>
			<!-- 添加照片 -->
			<view class='img'>
				<view class='add'>
					<view v-for="item in imgArr" :key="index">
						<image @click="imgYu" :data-list="item.path_server" :data-src="item.path_server" :src="item.path_server"></image>
					</view>
					<image src='../../static/images/fbu.jpg' @click='chooseImage' mode="aspectFit"></image>
				</view>
			</view>
			<view class="qt">
				<view class="qq">
					所在位置
					<image class="image" src="../../static/images/arrow.png"></image>
				</view>
				<picker @change="bindPickerChange" :value="index" :range="facilityArray">
					<view class="qq">
						<view class="one">
							发布类型
						</view>
						<image class="image" src="../../static/images/arrow.png"></image>
					</view>
				</picker>
				<button type='info' form-type='submit' size='default' class="fb">发布</button>
			</view>
		</form>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				imgArr: [], //图片数组
				chooseViewShow: true,
				ImgNumber: 3, //单次可选图片个数
				// userInfo: {
				// 	openid: 123456789
				// },
				urls: [],
				facilityArray: ['动态', '表白墙'],
				facility: '请选择',
				issueType: 0, //发布类型
				userType: 1, //用户类型
				tfanlt: '', // 内容描述
				isShowTextarea: false,
				onFocus: false,

			}
		},
		onLoad(e) {

		},
		computed: {
			...mapState(['nickName', 'avatarUrl', 'openid', 'gender','userId','userName'])
		},
		methods: {
			//提交信息
			issueSubmit(e) {
				let that = this;
				let datas = e.detail.value;
				console.log(datas);
				datas.openid = that.openid;
				datas.userId = that.userId;
				datas.createBy = that.userName;
				datas.issueType = that.issueType;
				datas.issueImags = this.urls;
				datas.userType = that.userType;
				datas.content = datas.tfanlt; //审核状态
				datas.verifyStatus = '0';
				console.log("这是datas：", datas);
				if (!datas.userId || datas.userId == "") {
					uni.showToast({
						title: '请先注册',
						icon: 'none',
						type: 'warning'
					});
					return;
				} else if (datas.issueType == "") {
					uni.showToast({
						title: '请选择发布类型',
						icon: 'none',
						type: 'warning'
					})
				} else if (datas.userType == "用户类型") {
					uni.showToast({
						title: '用户类型为空，请确认是否认证',
						icon: 'none',
						type: 'warning'
					})
				} else if (datas.content == "") {
					uni.showToast({
						title: '发布内容不能为空',
						icon: 'none',
						type: 'warning'
					})
				} else {
					uni.showLoading({
						title: '发布中...',
						mask: 'true'
					})
					setTimeout(function() {
						uni.hideLoading() //关闭加载页面
					}, 10000)

					var param = {
						url: "message/create1",
						data: datas,
						type: "POST",
						sCallback: function(data) {
							console.log("data:", data)
							if (data == 1) {
								uni.hideLoading() //关闭加载页面
								uni.showToast({
									title: '发布成功',
									type: 'success'
								})
								setTimeout(that.toMain, 1000);
							} else {
								uni.showToast({
									title: '发布失败，请检查网络重新发布',
									icon: 'none',
									type: 'warning'
								})
							}

						}
					};
					app.request(param);
				}
			},
			toMain() {
				uni.reLaunch({
					url: '/pages/dynamics/dynamics',
				})
			},
			// 描述框切换
			clickText() {
				let that = this;
				that.isShowTextarea = true;
				that.onFocus = true;
			},

			areaBlur(e) {
				// console.log('失去焦点')
				let that = this;
				let value = e.detail.value;
				that.onFocus = false;
				that.isShowTextarea = false;
				that.tfanlt = value;
			},
			//发布类型
			bindPickerChange: function(e) {
				let facilityArray = this.facilityArray;
				console.log('携带值为', e.detail.value)
				this.issueType = e.detail.value,
					this.facility = facilityArray[e.detail.value]
			},
			/** 选择图片 */
			chooseImage() {
				var that = this;
				var upload_picture_list = this.imgArr
				console.log(this.imgArr.length)
				if (this.imgArr.length == 3) {
					uni.showToast({
						title: "最多上传三张图片",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				uni.chooseImage({
					count: this.ImgNumber - this.imgArr.length, //最多选择4张图片
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						var tempFiles = res.tempFiles
						for (var i in tempFiles) {
							tempFiles[i]['upload_percent'] = 0
							tempFiles[i]['path_server'] = ''
							upload_picture_list.push(tempFiles[i])
						}
						if (res.tempFilePaths.count == 0) {
							return;
						}
						//上传图片
						console.log("upload_picture_list:", upload_picture_list)
						that.imgArr = upload_picture_list
						//this.up_data(upload_picture_list); //data
						that.chooseViewShow1() //判断是否隐藏添加
						that.uploadFile(upload_picture_list); //开始上传
					}
				})
			},
			up_data(obj) {
				this.imgArr = obj
			},
			uploadFile(imgArr) {
				//循环把图片上传到服务器 并显示进度   
				for (var j in imgArr) {
					if (imgArr[j]['upload_percent'] == 0) {
						this.upload_file_server(imgArr, j)
					}
				}
			},

			upload_file_server(upload_picture_list, j) {
				//图片上传
				let that = this
				const uplyk = uni.uploadFile({
					url: app.globalData.Link + "api/message/uploadimg",
					filePath: upload_picture_list[j]['path'], //上传的文件本地地址 
					name: 'multipartFile',
					success: function(res) {
						console.log(res);
						let data = JSON.parse(res.data);
						if (data.result == true) {
							var filename = "\""+app.globalData.Link+"upload/图片/" + data.url+"\""; //存储地址 显示
							that.urls = that.urls.concat(filename)
							upload_picture_list[j]['path_server'] = upload_picture_list[j].path;
						} else {
							var filename = "/assets/images/714.png" //错误图片 显示
							upload_picture_list[j]['path_server'] = filename;
						}
						that.up_data(upload_picture_list)
					}
				})
				//上传 进度方法
				uplyk.onProgressUpdate((res) => {
					upload_picture_list[j]['upload_percent'] = res.progress;
					this.up_data(upload_picture_list)
				})
			},
			/** 是否隐藏图片选择 */
			chooseViewShow1() {
				if (this.imgArr.length >= this.ImgNumber) {
					this.chooseViewShow = false
				} else {
					this.chooseViewShow = true
				}
			},
			/** 显示图片 */
			showImage(e) {
				let imgArr = this.imgArr;
				let itemIndex = e.currentTarget.dataset.id;
				let img = [];
				for (var i = 0; i < imgArr.length; i++) {
					img.push(imgArr[i].path);
				}
				wx.previewImage({
					current: img[itemIndex] // 当前显示图片的http链接
				})

			},
			//图片点击事件
			imgYu(event) {
				console.log(event);
				var src = event.currentTarget.dataset.src; //获取data-src
				var imgList = [event.currentTarget.dataset.list]; //获取data-list
				//图片预览
				wx.previewImage({
					current: src, // 当前显示图片的http链接
					urls: imgList // 需要预览的图片http链接列表
				})
			},
			//下拉刷新显示提示语
			onPullDownRefresh: function() {
				this.setData({
					showView: true, //这个是我判断提醒语的显示，我在page里设置变量是true
				})
				setTimeout(() => {
					this.setData({
						showView: false,
					})
					wx.hideNavigationBarLoading() //完成停止加载
					wx.stopPullDownRefresh() //停止下拉刷新
				}, 1000)
			}
		}
	}
</script>

<style>
	.all {
		width: 90%;
		height: 80%;
		margin-left: 40rpx;
		margin-right: 40rpx;
	}

	.show {
		width: auto;
		height: 200rpx;

		/* border: #000000 1rpx solid; */
	}

	/* 添加照片 */
	.img {
		display: flex;
		flex-wrap: wrap;
	}

	.add {
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		background-color: #fff;
		height: 160rpx;
	}

	.add image {
		margin-right: 8rpx;
		width: 160rpx;
		height: 160rpx;
	}

	.im {
		width: auto;
		height: 200rpx;
		margin-top: 20rpx;
		/* border: #4CD964 1rpx solid; */
		display: flex;
	}

	.image {
		width: 25rpx;
		height: 25rpx;
		margin-left: 540rpx;
		float: right;
	}

	.wa {
		width: 195rpx;
		height: 195rpx;
		margin: 5rpx 5rpx 5rpx 5rpx;
	}

	.qt {
		margin-top: 140rpx;
		width: auto;
		height: 350rpx;
		align-items: center;
		/* border: #007AFF 1rpx solid; */
		border-top: #F8F8F8 2rpx solid;
		text-align: left;
		/* border-bottom: 1px solid #ccc; */

	}

	.qq {
		width: auto;
		height: 80rpx;
		font-size: 25rpx;
		color: #555555;
		align-items: center;
		display: flex;
		justify-content: left;
		border-bottom: #F8F8F8 2rpx solid;

	}

	.tx {
		margin-top: 40rpx;

	}

	.te {
		width: 100%;
		height: 160rpx;
	}

	.btn {
		width: 100rpx;
		height: 20rpx;
		margin-left: auto;
	}

	.fb {
		color: #FFFFFF;
		font-size: 28rpx;
		margin-top: 100rpx;
		width: 300rpx;
		background-color: #255BBA;
	}

	.one {
		align-items: center;
		display: flex;

	}
</style>
